<template>
	<view class="storeIncome-container">
		<!-- 搜索框 -->
		<searchBar v-model="searchValue" @search="search" placeholder="搜索商户名称" />

		<!-- 日期筛选区域 -->
		<view class="date-filter-box">
			<view class="left">
				<view @click="switchDate('doday')" :class="{ 'filter-item': true, 'active-item': currentDateType == 'doday' }">今日</view>
				<view @click="switchDate('month')" :class="{ 'filter-item': true, 'active-item': currentDateType == 'month' }">本月</view>
				<view @click="switchDate('sort')" :class="{ 'filter-item': true, 'active-item': currentDateType == 'sort' }">排序</view>
			</view>
			<view class="right">
				<view @click="switchDate('custom')" class="filter-item">
					<image src="@/static/home/calendar.png" class="calendar"></image>
					<text class="date">{{ currentDate.startDate + '-' + currentDate.endDate }}</text>
				</view>
			</view>
		</view>

		<!-- 收益列表主体 -->
		<view class="storeIncome-list">
			<z-paging ref="paging" :fixed="false" v-model="storeIncomeList" @query="queryList">
				<template #loadingMoreNoMore>
					<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
				</template>

				<template #empty></template>

				<view @click="toStoreIncomeDetail" class="card">
					<view class="top">
						<image src="" class="store-pic"></image>
						<view class="info-box">
							<view class="store-name">邻几</view>
							<view class="store-desc">前五分钟内免费</view>
							<view class="store-desc">1元/小时 每24小时封顶20元</view>
						</view>
						<image src="@/static/go-icon.png" class="goIcon"></image>
					</view>
					<view class="bottom">
						<view class="data-box">
							<view class="box-title">订单总数</view>
							<view class="box-num">10.00</view>
						</view>
						<view class="data-box">
							<view class="box-title">订单金额</view>
							<view class="box-num">10.00</view>
						</view>
						<view class="data-box">
							<view class="box-title">商户收益</view>
							<view class="box-num">10.00</view>
						</view>
						<view class="data-box">
							<view class="box-title">我的收益</view>
							<view class="box-num">10.00</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>

	<!-- 自定义时间选择日历 -->
	<u-calendar
		v-model="customDateShow"
		@change="dateChange"
		mode="range"
		:max-date="maxDate"
		border-radius="48"
		:btnCustomStyle="{ background: '#00C582' }"
		active-bg-color="#00C582"
		range-bg-color="rgba(0, 197, 130, .1)"
		range-color="#00C582"
		:safe-area-inset-bottom="true"
	></u-calendar>

	<!-- 自定义筛选 -->
	<cdsPicker v-model="sortTypeShow" title="排序" @confirm="sortTypeConfirm">
		<template v-slot:body>
			<view class="picker-box">
				<picker-view :value="value" @change="sortTypeChange" :immediate-change="true" class="picker-view">
					<picker-view-column>
						<view class="pickerItem" v-for="(item, index) in sortTypeColumns" :key="index">{{ item.text }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</template>
		<template v-slot:footer>
			<view class="footer-box">
				<view class="reset-btn botton">清空筛选</view>
				<view @click="confirmSort" class="confirm-btn botton">确认</view>
			</view>
		</template>
	</cdsPicker>
</template>

<script setup>
import { ref } from 'vue';
import searchBar from '@/subPages/components/cds-searchBar/index.vue';
import cdsPicker from '@/subPages/components/cds-picker/index.vue';

// 搜索框内容
const searchValue = ref('');
const search = (e) => {
	searchValue.value = e;
};

// 查询设备列表
const storeIncomeList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	paging.value.complete([1, 2, 3, 4]);
};

// 切换时间选择
const currentDateType = ref('doday');
const currentDate = ref({
	startDate: '',
	endDate: ''
});
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const switchDate = (type) => {
	currentDateType.value = type;
	switch (type) {
		case 'doday':
			chooseToday();
			break;
		case 'month':
			chooseMonth();
			break;
		case 'sort':
			chooseSort();
			break;
		case 'custom':
			chooseCustom();
			break;
		default:
			break;
	}
};

// 选择今日
const chooseToday = () => {
	currentDate.value.startDate = year + '/' + month + '/' + day;
	currentDate.value.endDate = year + '/' + month + '/' + day;
	console.log(currentDate.value);
};
chooseToday();

// 选择本月
const chooseMonth = () => {
	currentDate.value.startDate = year + '/' + month + '/' + '01';
	currentDate.value.endDate = year + '/' + month + '/' + (day - 1);
	console.log(currentDate.value);
};

// 选择排序
const sortTypeColumns = ref([
	{ text: '我的收益降序', value: '1' },
	{ text: '我的收益升序', value: '2' },
	{ text: '商户收益降序', value: '3' },
	{ text: '商户收益升序', value: '4' },
	{ text: '订单金额升序', value: '5' }
]);
const sortTypeShow = ref(false);
const chooseSort = () => {
	sortTypeShow.value = true;
};

// 选择筛选
const currentChooseSortType = ref({});
const sortTypeChange = (e) => {
	console.log(e);
	console.log(sortTypeColumns.value[e.detail.value[0]]);
	currentChooseSortType.value = sortTypeColumns.value[e.detail.value[0]];
};

// 确认选择排序
const confirmSort = () => {
	sortTypeShow.value = false;
	console.log(currentChooseSortType.value);
};

// 选择自定义
const customDateShow = ref(false);
const maxDate = ref('');
maxDate.value = year + '-' + month + '-' + day;
const chooseCustom = () => {
	customDateShow.value = true;
};

// 自定义选择日期
const dateChange = (e) => {
	console.log(e);
	currentDate.value.startDate = e.startDate;
	currentDate.value.endDate = e.endDate;
};

// 跳转到商户详情页
const toStoreIncomeDetail = (item) => {
	uni.navigateTo({
		url: '/subPages/storeIncomeDetail/index?storeId=' + 123
	});
};
</script>

<style lang="scss" scoped>
.storeIncome-container {
	height: 100vh;
	padding: 24rpx;
	background-color: #f9f9f9;

	.date-filter-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0 24rpx;

		.left,
		.right {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			gap: 20rpx;

			.filter-item {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				line-height: 40rpx;
				padding: 12rpx;
				white-space: nowrap;
				border-radius: 12rpx;
				border: 2rpx solid #e0e0e0;
			}

			.active-item {
				color: #fff;
				background-color: $uni-main-color;
				border: 2rpx solid $uni-main-color;
			}
		}

		.right {
			.filter-item {
				color: #999;
				font-size: 24rpx;
				min-width: 356rpx;

				.calendar {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	.storeIncome-list {
		height: calc(100vh - 88rpx - 48rpx - 120rpx);
		
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.card {
			padding: 24rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin-bottom: 24rpx;

			.top {
				position: relative;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #f0f0f0;

				.store-pic {
					width: 124rpx;
					height: 124rpx;
					border-radius: 24rpx;
					margin-right: 24rpx;
				}

				.info-box {
					flex: 1;

					.store-name {
						font-size: 32rpx;
						font-weight: 500;
						line-height: 36rpx;
						margin-bottom: 12rpx;
					}

					.store-desc {
						font-size: 24rpx;
						line-height: 36rpx;
						color: #999;
						margin-bottom: 6rpx;

						&:last-child {
							margin-bottom: 0rpx;
						}
					}
				}

				.goIcon {
					position: absolute;
					top: 10rpx;
					right: 24rpx;
					width: 10rpx;
					height: 16rpx;
				}
			}

			.bottom {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 24rpx;
				padding-top: 24rpx;

				.data-box {
					height: 104rpx;
					padding: 12rpx 20rpx;
					border-radius: 16rpx;
					background-color: #f9f9f9;

					.box-title {
						color: #999;
						font-size: 24rpx;
						line-height: 40rpx;
					}

					.box-num {
						color: #333;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}
			}
		}
	}
}

:deep(.u-calendar__bottom__btn) {
	.u-btn--primary--disabled {
		border-color: rgba(0, 197, 130, 0.5) !important;
		background-color: rgba(0, 197, 130, 0.5) !important;
	}
}

.picker-box {
	height: 400rpx;
	padding: 0 40rpx;

	.picker-view {
		width: 100%;
		height: 400rpx;

		.pickerItem {
			height: 34px;
			line-height: 34px;
			text-align: center;
		}
	}
}

.footer-box {
	width: 100%;
	display: flex;
	gap: 24rpx;
	flex-wrap: nowrap;
	padding: 24rpx 52rpx 0;

	.botton {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: 32rpx;
		height: 98rpx;
		border-radius: 96rpx;
	}

	.reset-btn {
		color: #00c582;
		border: 1px solid #00c582;
	}

	.confirm-btn {
		color: #fff;
		border: 1px solid #00c582;
		background-color: #00c582;
	}
}
</style>
